import React, { Component } from 'react';
import { getPaihang } from '../../utils/api';
import '../../style/all.css';
import './Paihang.css';

export default class Paihang extends Component {
	state = {
		list: []
	}
	componentDidMount () {
		this.getPaihangs();
	}
	async getPaihangs () {
		const paihang = await getPaihang();
		this.setState({
			list: paihang.list
		})
	}
	render () {
		let { list } = this.state;
		return (
			<div className='paihang main'>
				<ul>
					{list.map((item) => (
						<li className='perse20' key={item.id} onClick={() => { this.props.history.push(`/gedandetail?id=${item.id}`); }}>
							<div className='img tophover'>
								<img width='100%' height='100%' src={item.coverImgUrl} alt="" />
								<div className='gd_mv_hover'></div>
							</div>
							<p>{item.name}</p>
						</li>
					))}
				</ul>
			</div>
		)
	}
}
